import React, { Component } from 'react';

/*
  学习目标：使用React的知识-模拟实现路由
  步骤：
     1. 新建三个组件： Home  Find  Friend
     2. 监听路由路径的变化
     3. 点击切换路由时，能够匹配不同的组件显示
*/
export default class App extends Component {
  // 1、声明state组件是否显示
  state = {
    current: '/home',
  };

  // 3、监听路由路径的变化
  componentDidMount() {
    window.addEventListener('hashchange', () => {
      console.log('路径变化了', window.location.hash);
      // 4、更新state组件变化
      // slice(1)从下标为开始
      this.setState({ current: window.location.hash.slice(1) });
      // console.log(window.location.hash.slice(1));
    });
  }
  render() {
    const { current } = this.state;
    return (
      <div>
        <h1>app组件</h1>
        <ul>
          <li>
            <a href="#/home">首页</a>
          </li>
          <li>
            <a href="#/my">我的音乐</a>
          </li>
          <li>
            <a href="#/friend">我的朋友</a>
          </li>
        </ul>
        {/* 2、条件判断，显示哪个组件，路由规则 */}
        {current === '/home' && <Home></Home>}
        {current === '/my' && <Find></Find>}
        {current === '/friend' && <Friend></Friend>}
      </div>
    );
  }
}

function Home() {
  return <h1>我是Home组件</h1>;
}

function Find() {
  return <h1>我是Find组件</h1>;
}
function Friend() {
  return <h1>我是Friend组件</h1>;
}
